<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>ORDER ONLINE</title>
<link rel="stylesheet" href="../../css/bootstrap/bootstrap.css"
	th:href="@{/css/bootstrap/bootstrap.css}" />
<script src="../../js/jquery-1.11.2.js" th:src="@{/js/jquery-1.11.2.js}"></script>
<script charset="UTF-8" src="../../js/client.js"
	th:src="@{/js/client.js}"></script>
</head>
<body>
	<header></header>
	<nav class="navbar navbar-default col-md-offset-1 col-md-10 container" style="background-color: red;">
		<div class="container-fluid">
			<ul class="nav navbar-nav">
				<li><a href="#" style="color: yellow;">1. Chọn khu vực</a></li>
				<li><a href="#">2. Chọn nhà hàng</a></li>
				<li><a href="#">3. Chọn thức ăn</a></li>
				<li><a href="#">4. Xác nhận đơn hàng</a></li>
			</ul>
		</div>
	</nav>
	<section class="col-md-offset-1 col-md-10">
		<article>
			<div class="row">
				<div class="col-md-3">
					<div style="font-size: 38px; width: 212px; color: #db0102;">
						<p>Đặt Hàng</p>
						<p>
							Ngay <img src="../../img/arrow.png" th:src="@{/img/arrow.png}" />
						</p>
					</div>
					<div>
						<div class="panel panel-default"
							style="border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px;">
							<div class="panel-heading"
								style="background-color: #DC143C; border-top-left-radius: 15px; border-top-right-radius: 15px;">
								<div class="panel-title"
									style="font-size: 30px; line-height: 32px; color: #FFF;">Khu
									vực</div>
							</div>
							<div class="panel-body">
								<p>Bạn hiện đang ở đâu? Xem những</p>
								<p>nhà hàng sẻ giao tới khu vực</p>
								<p>của bạn</p>
								<form id="choosearea" name="choosearea" method="get" th:action="@{/client/choose-restaurant}">
									<div class="form-group">
										<img src="../../img/number1.png" th:src="@{/img/number1.png}" />
										<select id="cityId" name="cityId"
											style="width: 150px; height: 23px;" onchange="getDistrict();">
											<option value="0">Chọn Thành Phố</option>
											<option th:each="city : ${cityList.entrySet()}"
												th:value="${city.key}" th:text="${city.value}"></option>
										</select>
									</div>
									<div class="form-group">
										<img src="../../img/number2.png" th:src="@{/img/number2.png}" />
										<select id="districtId" name="districtId"
											style="width: 150px; height: 23px;">
											<option value="0">Chọn Quận</option>
										</select>
									</div>
									<div class="form-group"></div>
									<div class="form-group">
										<a><button class="btn btn-default"
												onclick="return checkArea();"
												style="width: 150px; margin-top: 20px; margin-left: 25px; background-color: #DC143C; color: #FFF;">Chọn
												nhà hàng</button></a>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-9">
					<img width="700" height="500" src="../../img/food.png"
						th:src="@{/img/food.png}" />
				</div>
			</div>
		</article>
	</section>
	<footer class="container col-sm-12" style="margin-top: 50px;">
		<ol class="breadcrumb text-center">
			<li class="active"><p>@2015 orderonline.com - ĐẶT THỨC ĂN TRỰC TUYẾN, một phần của <strong>Takeaway.com</strong></p></li>
		</ol>
	</footer>
</body>
</html>